<template>
  <div>
    <el-card shadow="hover" style="margin: 20px 0 ;">
      <el-table :data="list" style="width: 100%" :row-class-name="tableRowClassName" border>
        <el-table-column type="index" label="序号" width="180" align="center">
        </el-table-column>
        <el-table-column prop="skuName" label="名称" width="180" align="center">
        </el-table-column>
        <el-table-column prop="skuDesc" label="描述" align="center">
        </el-table-column>
        <el-table-column prop="address" label="默认图片" align="center">
          <template slot-scope="{ row }">
            <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px">
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格(元)" align="center">
        </el-table-column>
        <el-table-column prop="weight" label="重量(KG)" align="center">
        </el-table-column>
        <el-table-column prop="address" label="操作" width="250px" align="center">
          <template slot-scope="{ row,$index }">
            <el-button type="warning" icon="el-icon-sort-down" size="mini" v-if="row.isSale == '1'"
              @click="Cancel(row)">
            </el-button>
            <el-button type="success" icon="el-icon-sort-up" size="mini" v-else @click="Sale(row)"></el-button>
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit"></el-button>
            <el-button type="info" icon="el-icon-info" size="mini" @click="showDetail(row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSku(row,$index)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="margin-top: 20px; text-align: center" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="page" :page-sizes="[3, 5, 10]" :page-size="limit"
        layout=" prev, pager, next, jumper, ->, sizes,total" :total="total">
      </el-pagination>

        <el-drawer :visible.sync="drawer" :show-close="false" size="50%">
      <el-row style="margin-top:50px">
        <el-col :span="2" style="margin-left: 150px;">名称</el-col>
        <el-col :span="16">{{ SkuInfo.skuName }}</el-col>
      </el-row>
      <el-row style="margin-top:50px">
        <el-col :span="2" style="margin-left: 150px;">描述</el-col>
        <el-col :span="16">{{ SkuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row style="margin-top:50px">
        <el-col :span="2" style="margin-left: 150px;">价格</el-col>
        <el-col :span="16">{{ SkuInfo.price }}</el-col>
      </el-row>
      <el-row style="margin-top:50px">
        <el-col :span="2" style="margin-left: 150px;">平台属性</el-col>
        <el-col :span="16">
          <template>
            <el-tag type="success" v-for="attr in SkuInfo.skuAttrValueList" :key="attr.id" style="margin-left:10px">
              {{ attr.attrId }}-{{ attr.valueId }}</el-tag>
          </template>
        </el-col>
      </el-row>
      <el-row style="margin-top:50px">
        <el-col :span="2" style="margin-left: 150px;">商品图片</el-col>
        <el-col :span="16">
          <el-carousel :interval="4000" type="card" height="200px" indicator-position="none">
            <el-carousel-item v-for="item in SkuInfo.skuImageList" :key="item.id">
              <img :src="item.imgUrl" alt="" style="width:260px;height:200px">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Sku',
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0,
      list: [],
      drawer: false,
      SkuInfo: {}
    }
  },
  mounted() {
    this.getSkuList()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    },
    async getSkuList() {
      let { page, limit } = this
      let result = await this.$API.reqSkulist(page, limit)
      if (result.code == 200) {
        this.list = result.data.records
        this.total = result.data.total
      }
    },
    handleCurrentChange(pager) {
      this.page = pager;
      this.getSkuList();
    },
    handleSizeChange(limit) {
      this.limit = limit;
      this.getSkuList();
    },
    async Cancel(row) {
      let result = await this.$API.reqCancel(row.id)
      if (result.code == 200) {
        row.isSale = 0
        this.$message.warning('下架成功')
      }
    },
    async Sale(row) {
      let result = await this.$API.reqSale(row.id)
      if (result.code == 200) {
        row.isSale = 1
        this.$message.success('上架成功')
      }
    },
    edit() {
      this.$message.info('后续功能正在推出中........')
    },
   async showDetail(row) {
      this.drawer = true
    let result = await this.$API.reqSkuById(row.id)
        if (result.code == 200) {
          this.SkuInfo = result.data
        }
    },
    deleteSku(row,index){
        this.list.splice(index,1)
        this.$message.success('删除SKU成功')
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>